<template>
  <div class="p-page">
    <div class="p-page_inner">
      <x-header :left-options="{showBack: false}" height="200px" style="background-color:#000;">车辆信息</x-header>
      <swiper  loop auto :list="swiperList" dots-position="center"></swiper>
      <section class="m-panel">
        <flexbox :gutter="0" class="g-fs--12 g-c--gray g-mt--5 g-mb--5">
          <flexbox-item><div class="g-pl--10">{{address}}</div></flexbox-item>
          <flexbox-item><div class="g-ta--r g-pr--10">{{createTime}}</div></flexbox-item>
        </flexbox>
        <p class="g-pl--10 g-fs--14">{{name}}</p>
        <p class="g-ta--c g-c--red g-mt--10 g-fs--14">仅会员商家可见</p>
        <flexbox :gutter="0">
          <flexbox-item :span="8"></flexbox-item>
          <flexbox-item class="g-ta--r"><router-link :to="/moreinfo/+this.carId" class="g-fs--12 g-c--gray m-btn-link">更多详情 ></router-link></flexbox-item>
        </flexbox>
        <hr>
        <flexbox :gutter="0" class="g-fs--12 g-c--gray g-mt--5 g-mb--5">
          <flexbox-item><div class="g-pl--10">该商家其他车辆已成交：{{fixtureNum}}</div></flexbox-item>
          <flexbox-item><div class="g-ta--r g-pr--10">浏览：{{browseNum}}</div></flexbox-item>
        </flexbox>
      </section>
      <!-- 基本信息 -->
      <section class="m-panel g-pr--10 g-pl--10 g-mt--10">
        <h5 class="g-ta--c g-mb--5">基本信息</h5>
        <div class="g-fs--12 g-c--gray">
          <flexbox>
            <flexbox-item><div>车型：{{baseCarInfo.type}}</div></flexbox-item>
            <flexbox-item><div>里程：{{baseCarInfo.mileage}}</div></flexbox-item>
          </flexbox>
          <flexbox>
            <flexbox-item><div>排放：{{baseCarInfo.discharge}}</div></flexbox-item>
            <flexbox-item><div>燃油：{{baseCarInfo.fuel}}</div></flexbox-item>
          </flexbox>
          <flexbox>
            <flexbox-item><div>用途：{{baseCarInfo.use}}</div></flexbox-item>
            <flexbox-item><div>颜色：{{baseCarInfo.color}}</div></flexbox-item>
          </flexbox>
          <flexbox>
            <flexbox-item><div>按揭：{{baseCarInfo.mortgage}}</div></flexbox-item>
            <flexbox-item><div>过户：{{baseCarInfo.transfer}}</div></flexbox-item>
          </flexbox>
          <flexbox>
            <flexbox-item><div>年审情况：{{baseCarInfo.annualVerification}}</div></flexbox-item>
            <flexbox-item><div>保险情况：{{baseCarInfo.insurance}}</div></flexbox-item>
          </flexbox>
        </div>
      </section>
      <section class="m-panel g-pr--10 g-pl--10 g-mt--10">
        <h5 class="g-ta--c g-mb--5">查看批发价及联系方式请下载抢车宝APP</h5>
      </section>
      <!-- 车辆描述 -->
      <section class="m-panel g-pr--10 g-pl--10 g-mt--10">
        <h5 class="g-ta--c g-mb--5">车辆描述</h5>
        <p class="g-fs--12 g-c--gray">{{carDescription}}</p>
      </section>
      
      <!-- 其他信息 -->
      <section class="m-panel g-mt--10 g-fs--12 g-c--gray g-pt--10 g-pb--10">
        <p class="g-pl--10">负责人：仅会员商家可见</p>
        <hr>
        <p class="g-pl--10">商家：仅会员商家可见</p>
        <hr>
        <p class="g-pl--10">电话：仅会员商家可见</p>
        <hr>
        <p class="g-pl--10">地址：仅会员商家可见</p>
      </section>
      <!-- 找相似车 -->
      <section class="m-panel g-mt--10 g-pl--10 g-pr--10 g-mb--5">
        <h5 class="g-ta--c g-mb--5">找相似车</h5>
        <div class="g-fs--12 g-c--gray p-icon--car">
          <flexbox>
              <flexbox-item class="g-ta--c" @click.native="showPlugin">
                <i class="icon-manage iconfont" style="font-size:24px;"></i>
                <p>同类型</p>
              </flexbox-item>
              <flexbox-item class="g-ta--c" @click.native="showPlugin">
                <i class="icon-pinpai iconfont" style="font-size:20px;"></i>
                <p>同品牌</p>
              </flexbox-item>
              <flexbox-item class="g-ta--c" @click.native="showPlugin">
                <i class="icon-coordinates iconfont" style="font-size:24px;"></i>
                <p>同地区</p>
              </flexbox-item>
              <flexbox-item class="g-ta--c" @click.native="showPlugin">
                <i class="icon-jiage iconfont" style="font-size:24px;"></i>
                <p>同价位</p>
              </flexbox-item>
          </flexbox>
        </div>
      </section>
    </div>
    <div class="p-footer">
      <box gap="10px 10px">
        <x-button  @click.native="showPlugin" :gradients="['#FF2719', '#FF61AD']"><p class="p-btn-text">下载抢车宝APP <small>（安卓系统手机请点击右上角，选择“在浏览器打开”）</small></p></x-button>
      </box>
    </div>
  </div>
</template>

<script>
import "../assets/plugins/iconfont/iconfont.css";
/* const imgList = [
  "http://placeholder.qiniudn.com/800x300/FF3B3B/ffffff",
  "http://placeholder.qiniudn.com/800x300/FFEF7D/ffffff",
  "http://placeholder.qiniudn.com/800x300/8AEEB1/ffffff"
];
const demoList = imgList.map((one, index) => ({
  url: "javascript:",
  img: one
})); */
import Vue from "vue";
import Router from "vue-router";
import qs from "qs";
// import axios from "axios";
// Vue.prototype.$ajax = axios;
Vue.use(Router);
import {
  Scroller,
  Divider,
  Spinner,
  XButton,
  Group,
  Cell,
  LoadMore,
  Swiper,
  GroupTitle,
  SwiperItem,
  Flexbox,
  FlexboxItem,
  XHeader,
  Actionsheet,
  ButtonTab,
  ButtonTabItem,
  Tabbar,
  TabbarItem,
  Box,
  Confirm,
  ConfirmPlugin,
  Alert,
  AlertModule
} from "vux";
Vue.use(ConfirmPlugin);
export default {
  components: {
    Group,
    Cell,
    Swiper,
    SwiperItem,
    GroupTitle,
    XButton,
    Divider,
    Flexbox,
    FlexboxItem,
    XHeader,
    Actionsheet,
    ButtonTab,
    ButtonTabItem,
    Tabbar,
    TabbarItem,
    Box,
    Confirm,
    ConfirmPlugin,
    Alert,
    AlertModule
  },
  data() {
    return {
      swiperList: [],
      address: "浙江省 绍兴市",
      createTime: "2018-03-31 09:20",
      name: "2007年01月 别克 君越 2.4 标准版",
      fixtureNum: "12",
      browseNum: "20",
      baseCarInfo: {
        type: "轿车",
        mileage: "",
        discharge: "国三",
        fuel: "汽油",
        use: "非营运",
        color: "红色",
        mortgage: "",
        transfer: "",
        annualVerification: "2019-01",
        insurance: "2018-01",
        show: false
      },
      carDescription:
        "车子动力很好。后面小追尾。前面是原版的。整车看起来90分。",
      downhref:
        "http://www.qiangchebao.cn/page/icode"
    };
  },
  beforeCreate() {
    let _this = this;
    let carId = this.$route.query.car_id;
    this.carId = this.$route.query.car_id;
    this.$http
      .post(
        "/car/getCarInfo",
        qs.stringify({
          car_id: carId
        })
      )
      .then(response => {
        console.log("获取车辆详情接口:", { car_id: carId }, response.data);
        let data = response.data;
        let arr_imgs = data.pictures.split("|");
        this.name = data.all_name;
        this.address = data.city;
        this.baseCarInfo.color = data.color;
        this.baseCarInfo.mortgage =
          parseInt(data.is_mortgage) === 1 ? "能" : "不能";
        this.baseCarInfo.transfer =
          parseInt(data.is_transfer) === 1 ? "能" : "不能";
        this.baseCarInfo.mileage = data.km;
        this.baseCarInfo.type = data.model;
        this.baseCarInfo.fuel = data.fuel;
        this.baseCarInfo.discharge = data.emission;
        this.baseCarInfo.annualVerification = data.inspection_date;
        this.baseCarInfo.insurance = data.insurance_date;
        this.baseCarInfo.use = data.use;
        this.carDescription = data.detail;
        this.browseNum = data.view_num;
        this.fixtureNum = data.dealerInfo.buy_num;

        console.log(arr_imgs);
        this.swiperList = arr_imgs.map((one, index) => ({
          url: "javascript:",
          img: "http://qiangchebao.oss-cn-hangzhou.aliyuncs.com/" + one
        }));
      });
  },
  /* created() {
    // console.log("created");
    AlertModule.show({
      title: "提示",
      content:
        "推广期间，下载并开通抢车宝会员商家，价格低至180元/年！快来点击下载吧~",
      buttonText: "知道了"
    });
  }, */
  methods: {
    onCancel() {
      console.log("on cancel");
    },
    onConfirm(msg) {
      console.log("on confirm");
      if (msg) {
        alert(msg);
      }
    },
    onHide() {
      console.log("on hide");
    },
    onShow() {
      console.log("on show");
    },
    showPlugin() {
      const $this = this;
      this.$vux.confirm.show({
        title: "提示",
        content: "即刻下载“抢车宝”APP，使用完整功能（安卓系统手机请点击右上角，选择“在浏览器打开”）",
        onShow() {
          console.log("plugin show");
        },
        onHide() {
          console.log("plugin hide");
        },
        onCancel() {
          console.log("plugin cancel");
        },
        onConfirm() {
          window.location.href = $this.downhref;
        }
      });
    },
    showModule() {
      AlertModule.show({
        title: "VUX is Cool",
        content: this.$t("Do you agree?"),
        onShow() {
          console.log("Module: I'm showing");
        },
        onHide() {
          console.log("Module: I'm hiding now");
        }
      });
    }
  }
};
</script>

<style>
.p-btn-text {
  font-size: 14px;
  line-height: 1.5;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.p-btn-text small {
  display: block;
  font-size: 12px;
}
.vux-demo {
  text-align: center;
}
.logo {
  width: 100px;
  height: 100px;
}

.m-btn-link {
  display: inline-block;
  padding: 0 10px;
}
.m-btn-link:active {
  color: rgba(0, 0, 0, 0.7);
}
.m-panel {
  background-color: #fff;
  padding-top: 5px;
  padding-bottom: 5px;
}
.m-panel.g-pb--10 {
  padding-bottom: 10px;
}
.m-panel.g-pt--10 {
  padding-top: 10px;
}
.p-icon--car .iconfont {
  line-height: 2rem;
}
.p-page {
  height: 100%;
  position: relative;
}
.p-page_inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: transform 0.38s ease-in-out, visibility 0.38s;
  overflow: auto;
  padding-bottom: 55px;
}
.p-footer {
  position: absolute;
  z-index: 500;
  bottom: 0;
  width: 100%;
  background-color: #f7f7fa;
}
</style>
